<template>
  <div class="xlSeeFrom">
    <div class="tab-item">
      <div class="item">
        <p class="tab-title">Personal Infomation</p>
        <div class="tab">
          <table>
            <tr>
              <td>Name</td>
              <td>PE Number</td>
              <td>Country</td>
              <td>Email</td>
              <td>Dept</td>
            </tr>
            <tr>
              <td>{{form.pe_name}}</td>
              <td>{{form.pe_number}}</td>
              <td>{{form.country}}</td>
              <td>{{form.email}}</td>
              <td>{{form.dept_name}}</td>
            </tr>
            <tr>
              <td>Position</td>
              <td>Leader</td>
              <td>Contract Type</td>
              <td>Swift</td>
              <td>Current Salary</td>
            </tr>
            <tr>
              <td>{{form.position}}</td>
              <td>{{form.leader_name}}</td>
              <td>{{form.contract_type}}</td>
              <td>{{form.swift}}</td>
              <td v-if="!show" @click="showSalary">***</td>
              <td v-if="show" class="salary">{{form.salary}}</td>
            </tr>
            <tr>
              <td>Bank Account Number</td>
              <td>Bank Name</td>
              <td>Bank Address</td>
              <td>Tax Number</td>
              <td>Tax Rate</td>
            </tr>
            <tr>
              <td>{{form.bank_account_number}}</td>
              <td>{{form.bank_name}}</td>
              <td>{{form.bank_address}}</td>
              <td>{{form.tax_number}}</td>
              <td>{{form.tax_rate}}</td>
            </tr>
            <tr>
              <td>Contract Currency</td>
              <td>Payment Currency</td>
              <td>Social Security Type</td>
              <td>Social Security Start time</td>
              <td>Social Security Amount</td>
            </tr>
            <tr>
              <td>{{form.contract_currency}}</td>
              <td>{{form.payment_currency}}</td>
              <td>{{form.social_security_type}}</td>
              <td>{{form.social_security_start_time}}</td>
              <td>{{form.social_security_money}}</td>
            </tr>
            <tr>
              <td>Annual leave Used</td>
              <td>Annual leave Remain</td>
              <td>Sick leave Used</td>
              <td>Social Security Start Time</td>
            </tr>
            <tr>
              <td>{{form.annual_leave_used}}</td>
              <td>{{form.annual_leave_remain}}</td>
              <td>{{form.sick_leave_used}}</td>
              <td>{{form.sick_leave_remain}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {userInfo} from '@/request/api'
export default {
  data(){
    return {
      form:{},
      username:'',
      show:false
    }
  },
  created(){
    this.username = sessionStorage.getItem('userName')
    userInfo({
      other_name:this.username
    }).then(res =>{
      this.form = res.data
    })
  },
  mounted(){

  },
  methods:{
    showSalary(){
      this.show = true
      setInterval(() => {
        this.show = false
      },3000)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-form-item__label {
  background-color: #eee;
  text-align: center;
  //width: 121px;
}
/deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #eee;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  color: #333;
  font-size: 15px;
  word-break: break-all;
}
.content{
  margin-top: 10px;
  margin-bottom: 10px;
  table{
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
  }
  table td{
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: #999999;
  }
  table td.salary{
    cursor: pointer;
    background-color: red;
  }
  table tr td:nth-child(2n+1){
    background-color: #eee;
  }
}
.tab-item{
  width: 100%;
  padding: 10px 0;
  border: 1px solid #eee;

  table{
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
  }
  table td{
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #999999;
    width: 20%;
  }
  table tr:nth-child(2n+1){
    background-color:#F2F6FC;
    height:50px;
    text-align: center;
  }
  table tr:nth-child(2n){
    background-color: #fff;
    height:50px;
    text-align: center;
  }
}

.tab-title{
  font-family: SourceHanSansSC;
  font-weight: 700;
  font-size: 20px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  padding: 5px 10px;
}
</style>
